<template>
  <el-card class="Role-container">
    <template #header>
      <div class="header">
        <h3>问题列表</h3>
      </div>
    </template>
    <ul>
      <li v-for="item in listData" :key="item.id">
        <topic-element
            :description="item.description"
            :type="item.type"
            :topic-id="item.id"
            :title="item.title"
            @click="changeValue(item)"
            v-model:fraction="item.fraction"
        />
      </li>
    </ul>
    <div style="text-align: center">
      <el-button type="danger" @click="reset">重置</el-button>
      <el-button type="primary" @click="submit">提交</el-button>
    </div>
  </el-card>
</template>

<script>
import {onMounted, reactive, toRefs} from 'vue'
import {useRoute, useRouter} from 'vue-router'
import moment from "moment";
import axios from "@/utils/axios";
import {ElMessage, ElRate, ElSwitch} from "element-plus";
import TopicElement from "@/components/TopicElement.vue";

export default {
  name: 'planTopic',
  components: {
    ElSwitch,
    ElRate,
    TopicElement
  },
  props: {
    type: String
  },
  setup() {
    const router = useRouter()
    const route = useRoute()
    const state = reactive({
      loading: false,
      listData: [], // 数据列表
      courseId: 0,
      type: "",
      planId: 0,
    })
    onMounted(() => {
      // 课程id
      state.courseId = route.query.courseId
      // 计划id
      state.planId = route.query.planId
      state.type = route.query.type
      getInfo()
    })
    // 获取分类列表
    const getInfo = () => {
      state.loading = true
      axios.get('/evaluate/topic/plan', {
        params: {
          planId: state.planId
        }
      }).then(res => {
        state.listData = res.map(topic => ({...topic, fraction: 0}))
        state.loading = false
      })
    }
    const reset = () => {
      state.listData.forEach(item => item.fraction = 0)
    }
    const submit = () => {
      console.log(state)
      let url = `/evaluate/evaluationPlan/student/${state.planId}/${state.courseId}`;
      if (state.type === 'teacher') {
        url = `/evaluate/evaluationPlan/teacher/${state.planId}/${state.courseId}`
      }
      axios.post(url, state.listData.map(item => ({
        topicId: item.id,
        fraction: item.fraction
      }))).then(() => {
        ElMessage.success("保存成功")
        router.push({
          path: "/plan/course", query: {
            planId: state.planId,
            type: state.type
          }
        })
      })
    }
    const changeValue = (item) => {
      const topicId = item.id;
      let stop = false
      state.listData = state.listData.filter((data) => {
        let b = !stop;
        if (data.id === topicId) {
          stop = true;
        }
        return b;
      })
      if (item.fraction <= 2 && item.nextTopicC != null) {
        console.log(item)
        getTopicInfo(item.nextTopicC)
        return
      }
      if (item.fraction <= 4 && item.nextTopicB != null) {
        console.log(item)
        getTopicInfo(item.nextTopicB)
        return;
      }
      if (item.fraction <= 5 && item.nextTopicA != null) {
        getTopicInfo(item.nextTopicA)
        console.log(item)
      }
    }
    const getTopicInfo = (nextId) => {
      const url = `/evaluate/topic/${nextId}`
      axios.get(url, {}).then((res) => {
        state.listData.push({...res, fraction: 0})
      })
    }

    return {
      ...toRefs(state),
      reset,
      submit,
      changeValue,
      dateFormat: function (row, column) {
        const date = row[column.property];
        if (date === undefined) {
          return ''
        }
        return moment(date).format("YYYY-MM-DD HH:mm:ss")
      }
    }
  }
}
</script>

<style scoped>
.Role-container {
  min-height: 100%;
}

.el-card.is-always-shadow {
  min-height: 100% !important;
}

li {
  list-style-type: none;
  display: list-item;
  margin-top: 20px;
  text-align: -webkit-match-parent;
}
</style>